<script setup lang="ts">

import { onMounted, reactive } from 'vue';
import { PageEntity } from '@/entitu/page.entity';
import { postAction } from '@/api/common';
import { getCoursePageApi } from '@/api/course';
import { StatusEnum } from '@/common/status.enum';
import { FilterEnum } from '@/common/filter.enum';
import router from '@/router';

const state = reactive({
  pageInfo: new PageEntity(),
  courseList: [],
  weekMap: {
    1: '星期一',
    2: '星期二',
    3: '星期三',
    4: '星期四',
    5: '星期五',
    6: '星期六',
    7: '星期日'
  },
  name: ''
});
const getCourseList = () => {
  if (state.name) {
    state.pageInfo.pageIndex = 1;
    state.pageInfo.filters.name = {
      value: state.name,
      matchMode: FilterEnum.LIKE
    }
  } else {
    delete state.pageInfo.filters.name;
  }
  postAction(getCoursePageApi, state.pageInfo).then(res => {
    if (res.code === StatusEnum.SUCCESS) {
      state.courseList = res.data.data;
    }
  });
};
const clickSetClassHours = (data) => {
  router.push({
    path: '/set-class-hours/' + data.id,
  });
}
onMounted(() => {
  getCourseList();
});
</script>

<template>
  <div class="home-container h-calc">
    <div class="search-bar">
      <van-search v-model="state.name" placeholder="请输入课程名称" @update:model-value="getCourseList" />
    </div>
    <div v-if="state.courseList.length" class="course-list">
      <div class="course-item" v-for="item in state.courseList" :key="item.id">
        <div class="name item">
          {{item.name}}
        </div>
        <div class="student-count item">
          学生人数：<span>{{item.studentCount}}</span>
        </div>
        <div class="week-day item">
          上课时段：{{state.weekMap[item.weekDay]}} {{item.startTime.slice(0, 5)}} - {{item.endTime.slice(0, 5)}}
        </div>
        <van-button type="primary" block @click="clickSetClassHours(item)">设置课时</van-button>
      </div>
    </div>
    <NoData v-else />
    <HlTabbar />
  </div>
</template>

<style scoped lang="scss">
  .home-container{
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    .search-bar{
      height: 100px;
    }
    .course-list{
      flex: 1;
      overflow-y: auto;
      .course-item{
        padding: 20px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        .item{
          margin-bottom: 30px;
        }
        .name{
          font-weight: 500;
          margin-bottom: 20px;
        }
        .student-count{
          font-size: 28px;
          span{
            color: #f39800;
          }
        }
        .week-day{
          color: #636363;
        }
      }
    }
  }
</style>
